<template>
    <div class="dashboard-page">
        <div class="header">
            <h1>统计</h1>
        </div>

        <div v-if="loading" class="loading-state">正在加载数据...</div>
        <div v-if="error" class="error-state">{{ error }}</div>

        <div v-if="stats" class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon icon-users">
                    <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
                </div>
                <div class="stat-info">
                    <h3>会员总数</h3>
                    <p>{{ stats.memberCount }}</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon icon-products">
                    <svg viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6-4c1.66 0 3 1.34 3 3v2H9V6c0-1.66 1.34-3 3-3zm6 14H6V10h12v10z"></path></svg>
                </div>
                <div class="stat-info">
                    <h3>商品总数</h3>
                    <p>{{ stats.productCount }}</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon icon-stores">
                    <svg viewBox="0 0 24 24"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10z"></path></svg>
                </div>
                <div class="stat-info">
                    <h3>入驻商店</h3>
                    <p>{{ stats.storeCount }}</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon icon-orders">
                    <svg viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6-2h4v2h-4V4zM4 19V8h16v11H4z"></path></svg>
                </div>
                <div class="stat-info">
                    <h3>总订单数</h3>
                    <p>{{ stats.orderCount }}</p>
                </div>
            </div>
        </div>

        <div class="chart-container">
            <h2>核心数据概览</h2>
            <v-chart class="chart" :option="chartOption" autoresize />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { api } from '@/network/api';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);


const stats = ref<any>(null);
const loading = ref(true);
const error = ref<string | null>(null);

const chartOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['会员', '商品', '商店', '订单'],
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '总数',
      data: [], // Initial empty data, will be populated with objects
      type: 'bar',
      barWidth: '60%',
    }
  ]
});

const fetchDashboardStats = async () => {
    try {
        loading.value = true;
        const response = await api.getStats();
        stats.value = response.data;

        if (response.data) {
            const colors = ['#3498db', '#2ecc71', '#e67e22', '#9b59b6'];
            const chartData = [
                {
                    value: response.data.memberCount,
                    itemStyle: { color: colors[0] }
                },
                {
                    value: response.data.productCount,
                    itemStyle: { color: colors[1] }
                },
                {
                    value: response.data.storeCount,
                    itemStyle: { color: colors[2] }
                },
                {
                    value: response.data.orderCount,
                    itemStyle: { color: colors[3] }
                }
            ];
            chartOption.value.series[0].data = chartData as any;
        }

        error.value = null;
    } catch (err) {
        console.error("获取仪表盘数据失败:", err);
        error.value = '数据加载失败，请稍后重试。';
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    fetchDashboardStats();
});
</script>

<style scoped>
.dashboard-page {
    padding: 30px;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.header h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}
.stat-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 25px;
    display: flex;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
}
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}
.stat-icon svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}
.stat-info h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #666;
    font-weight: 500;
}
.stat-info p {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}
.icon-users { background-color: #3498db; }
.icon-products { background-color: #2ecc71; }
.icon-stores { background-color: #e67e22; }
.icon-orders { background-color: #9b59b6; }

.chart-container {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.chart-container h2 {
    margin-top: 0;
    font-size: 20px;
    font-weight: 600;
}
.chart {
    height: 350px;
}
.loading-state, .error-state {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    color: #666;
}
</style> 